<!DOCTYPE html>
<html>
<head>
	<title>分割面板</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.box {
			display: flex;
			height: calc(100vh - 24px);
		}
		#left, #right {
			font-size: 40px;
			fong-weight: bold;
			line-height: 90vh;
			text-align:center;
			color: #fff;
		}
		#left {
			width: 200px;
			background-color: #badfdb;
		}
		#right {
			flex: 1;
			background-color: #d8eff0;
		}
		#split {
			display: flex;
			align-items:center;
			justify-content:space-around;
			position: relative;
			width: 10px;
			cursor:e-resize;
			-webkit-user-select: none;
			user-slect:none;
		}
		#split::before,
		#split::after {
			content: "|";
			font-size: 16px;
			color: #bbb;
		}
	</style>
</head>
<body>
	<a href="../index.html"><img src="../image/back.png"></a>
	<div class="box">
		<div id="left">LEFT</div>
		<div id="split"></div>
		<div id="right">RIGHT</div>
	</div>

	<script type="text/javascript">
		let split = document.querySelector("#split")
		let left = document.querySelector("#left");
		let startX, width;

		split.addEventListener('mousedown', function(e) {
			startX = e.clientX;
			width = parseInt(window.getComputedStyle(left).width)
			document.addEventListener('mousemove', handleMove)
		})

		function handleMove(e) {
			let newWidth=width+e.clientX-startX
			newWidth = newWidth < 200 ? 200 : newWidth

			left.style.width=newWidth+"px"
		}

		document.addEventListener('mouseup', function(){
			document.removeEventListener('mousemove', handleMove)
		})
	</script>
</body>
</html>